<template>
	<view>
		<view class="" style="overflow-x: hidden;">
			<view style="text-align: center;margin: 60rpx;">
				{{title}}
			</view>
			<view class="">
				<!-- <vcode-input ref="VcodeInput" @vcodeInput="vcodeInput"></vcode-input> -->
				<view v-if="isTemporary == 'delete'" class="number_box">
					<view class="number_item" v-for="item,index in 6">
						{{password[index]}}
					</view>
				</view>
				<xt-verify-code v-else ref="verifyInput" class="verify-code" v-model="password" @confirm="vcodeInput">
				</xt-verify-code>
			</view>
			<view style="text-align: center;margin: 40rpx;font-size: 24rpx;">
				该密码用于临时开锁，可选择当前时间后的3-15分钟内有效。过期后自动失效
			</view>
		</view>
		<j-cell-group>
			<j-cell v-if="isTemporary == 'save'" title="有效时长" :more="true">
				<view slot="tips" style="padding-right:0rpx;">
					<picker @change="bindTimeChange" :value="index" :range="array">
						<view style="width: 400rpx; height: 80rpx;" class="uni-input">{{selectDate?selectDate+'分钟':''}}
						</view>
					</picker>
				</view>
			</j-cell>
			<!-- <j-cell title="有效时段起始时间" :more="false" @jftap="jftapstartTime">
				<view slot="tips" style="padding-right:20rpx;">
					<uni-datetime-picker class="unidatime" style="z-index: 999;" v-model="startTime"
						@change="changestart" :border="false">
					</uni-datetime-picker>
				</view>
			</j-cell>
			<j-cell title="有效时段终止时间" :more="false" @jftap="jftapstartTime">
				<view slot="tips" style="padding-right:20rpx;">
					<uni-datetime-picker style="z-index: 999;" v-model="endTime" @change="changeend" :border="false">
					</uni-datetime-picker>
				</view>
			</j-cell> -->
			<j-cell v-if="startTime" title="有效时段起始时间" :more="false" @jftap="jftapstartTime">
				<view slot="tips" style="padding-right:20rpx;">
					{{startTime}}
				</view>
			</j-cell>
			<j-cell v-if="endTime" title="有效时段终止时间" :more="false" @jftap="jftapstartTime">
				<view slot="tips" style="padding-right:20rpx;">
					{{endTime}}
				</view>
			</j-cell>
		</j-cell-group>
		<view class="foot-button">
			<button style="z-index: 888;" v-if="isTemporary == 'save'" class="block" @tap="nextstep()"
				type="operation">保存并分享</button>
			<button style="z-index: 888;color:red;" v-if="isTemporary == 'delete'" @tap="deletePassword()"
				type="delete">删除</button>
			<button style="z-index: 888;" v-if="isTemporary == 'edit'" class="block" @tap="editPassword()"
				type="operation">编辑</button>
		</view>
<!--		<j-doorbell ref="doorbellCall"></j-doorbell>-->
	</view>
</template>

<script>
	import getDateTime from '@/jvss/pagesDevice/utils/getdateTime.js';
	export default {
		data() {
			return {
				title: '请输入6位数字密码',
				device: {},
				tips: 1,
				startTime: '',
				endTime: '',
				vaildNum: 100,
				password: '123456',
				enable: true,
				verifyCode: "",
				isTemporary: 'save', //是否有临时密码
				array: ['3分', '4分', '5分', '6分', '7分', '8分', '9分', '10分', '11分', '12分', '13分', '14分', '15分'],
				selectDate: ''
			}
		},
		onLoad(opt) {
			this.device = JSON.parse(decodeURIComponent(opt.device))
			this.getconfig()
		},
		methods: {
			bindTimeChange(e) {
				let minutes = Number(e.detail.value) + 3;
				this.selectDate = minutes;
				this.getTimeSelect()
			},
			getTimeSelect() {
				this.startTime = getDateTime.dateTimeStr('y-m-d h:i:s');
				let dateTime = new Date();
				dateTime = dateTime.setMinutes(dateTime.getMinutes() + this.selectDate);
				dateTime = new Date(dateTime);
				let Y = dateTime.getFullYear() + '-';
				let M = (dateTime.getMonth() + 1 < 10 ? '0' + (dateTime.getMonth() + 1) : dateTime.getMonth() + 1) + '-';
				let D = (dateTime.getDate() < 10 ? '0' + (dateTime.getDate()) : dateTime.getDate());
				let h = dateTime.getHours() < 10 ? "0" + dateTime.getHours() : dateTime.getHours();
				let m = dateTime.getMinutes() < 10 ? "0" + dateTime.getMinutes() : dateTime.getMinutes();
				let s = dateTime.getSeconds() < 10 ? "0" + dateTime.getSeconds() : dateTime.getSeconds();
				this.endTime = Y + M + D + " " + h + ":" + m + ':' + s;
				// this.compareDate(this.startTime, this.endTime)
			},
			compareDate(date1, date2) {
				let dates1 = new Date(date1); //当前时间
				let dates2 = new Date(date2); //结束时间
				if (dates1 > dates2) {
					return true;
				} else {
					return false;
				}
			},
			// 获取临时密码
			getconfig() {
				uni.showLoading();
				let token = this.device.token;
				let data = {
					"OPDoorLockProCmd": {
						"Cmd": "GetAllDevList"
					},
					"Name": "OPDoorLockProCmd"
				};
				getApp().globalData.api.getconfig(data, token, (result) => {
					uni.hideLoading()
					let TempPasswd = result.GetAllDevList[0].TempPasswd
					if (TempPasswd && TempPasswd.length > 0) {
						this.startTime = TempPasswd[0].StartTime
						this.endTime = TempPasswd[0].EndTime;
						this.password = TempPasswd[0].Passwd
						if (this.compareDate(new Date(), TempPasswd[0].EndTime)) {
							this.isTemporary = 'edit'
							this.title = "已过期"
						} else {
							this.isTemporary = 'delete'
							this.title = "使用中"
						}
					} else {
						this.title = "请输入6位数字密码"
						this.isTemporary = 'save'
						this.startTime = ''
						this.endTime = '';
						this.password = '';
					}
				});
			},
			// 用户输入的值
			vcodeInput(val) {
				this.password = val
			},
			nextstep() {
				if (!this.password) {
					return uni.showToast({
						title: '请输入密码',
						icon: 'none'
					});
				}
				if (this.password.length != 6) {
					return uni.showToast({
						title: '密码不得低于6位',
						icon: 'none'
					});
				}
				if (!this.selectDate) {
					return uni.showToast({
						title: '请选择有效时长',
						icon: 'none'
					});
				} else if (this.compareDate(new Date(), this.endTime)) {
					return wx.showModal({
						title: '提示',
						content: '结束时间不得小于当前时间请重新选择',
						confirmText: '确定',
						showCancel: false,
						success: (res) => {
							this.selectDate = ''
						}
					})
				}
				// this.getTimeSelect()
				this.setPassword()
			},
			// 设置临时密码
			setPassword(type) {
				uni.showLoading();
				let token = this.device.token;
				let data = {
					sn: this.device.deviceNo,
					props: {
						doorLock: {
							tempPassword: [{
								password: this.password,
								startTime: this.startTime,
								endTime: this.endTime,
								validNum: this.vaildNum,
								enable: this.enable
							}]
						}
					}
				};
				getApp().globalData.api.remoteUnlock(data, token, (result) => {
					console.log('分享临时密码===>：', result);
					uni.hideLoading()
					let password = this.password
					if (result.Ret === 100) {
						if (type) {
							this.getconfig()
						} else {
							wx.showModal({
								title: '复制临时密码',
								content: password,
								confirmText: '复制',
								showCancel: false,
								success: (res) => {
									if (res.confirm) {
										console.log('用户点击确定')
										wx.setClipboardData({
											data: password,
											success: (res) => {
												uni.navigateBack({
													delta: 1, //返回层数，2则上上页
												})
											}
										})
									}
								}
							})
						}
					} else {
						uni.showToast({
							title: result.RetMsg
						});
					}
				});
			},
			// 删除临时密码
			deletePassword() {
				this.enable = false;
				this.setPassword('delete')
			},
			// 编辑临时密码
			editPassword() {
				this.selectDate = '';
				this.password = '';
				this.isTemporary = 'save'
			},
			changestart(v) {
				console.log(v)
			},
			changeend(v) {
				console.log(v)
			},
			changeValue(v) {
				console.log(v)
			},
			jftapstartTime() {},
			jftapendTime() {},
		}
	}
</script>

<style lang="scss">
	.unidatime {
		border: 1px solid red;
	}

	.uniui-calendar {
		display: none;
	}

	.uniui-clear {
		display: none;
	}

	.uni-date__x-input {
		padding: 0;
	}

	.deleteblock {
		color: red !important;
	}

	.uni-input {
		// border: 1px solid rebeccapurple;
		width: 300rpx;
		height: 45px;
		line-height: 45px;
		text-align: right;
	}

	.verify-code {
		.xt__verify-code {
			width: 80% !important;
			margin: auto;
		}

		.xt__input-ground {
			margin: auto;

			.xt__code-text {
				font-size: 40rpx !important;
			}
		}

		/deep/.xt__box {
			width: 76rpx !important;
			height: 76rpx !important;
		}
	}

	.number_box {
		width: 80%;
		display: flex;
		justify-content: space-between;
		margin: auto;

		>.number_item {
			width: 76rpx;
			height: 76rpx;
			border: #ccc 2px solid;
			font-size: 40rpx;
			line-height: 76rpx;
			text-align: center;
			color: #ccc;
		}
	}
</style>
